import React from 'react';
import Power from "./power";
import PowerFactor from "./powerFactor";
import borderImg from "../imgs/ksh34.png";
import { Tag, Divider } from 'antd';

const globalConfig = require("../js/globalConfig");
const utils = require("../js/utils");

class MainTitle extends React.Component {
    render() {
        return (
            <div className="module-title">
                <div className="lifter-text">主井提升机状态</div>
                <Tag color="#3b5999">提煤</Tag>
                <Tag color="#3b5999">检修</Tag>
                <Tag color="#3b5999">紧急开车</Tag>
                <Tag color="default">休止</Tag>
                <Tag color="#3b5999">故障</Tag>
                <Tag color="#3b5999">人为停止</Tag>
                <Tag color="#3b5999">验绳</Tag>
            </div>
        );
    }
}

class SubTitle extends React.Component {
    render() {
        return (
            <div className="module-title">
                <div className="lifter-text">副井提升机状态</div>
                <Tag color="#3b5999">提人</Tag>
                <Tag color="#3b5999">提物</Tag>
                <Tag color="#3b5999">检修</Tag>
                <Tag color="#3b5999">紧急开车</Tag>
                <Tag color="#3b5999">休止</Tag>
                <Tag color="#3b5999">故障</Tag>
                <Tag color="default">人为停止</Tag>
            </div>
        );
    }
}

class ModuleTitle extends React.Component {
    render() {
        const element = this.props.flag ? <MainTitle /> : <SubTitle />;
        return (element);
    }
}

class Data extends React.Component {
    render() {
        return (
            <div className="lifter-data">
                <Power className="power" />
                <PowerFactor className="power-factor" />
                <div className="vel-hei">
                    <div className="vh-m">
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <div className="vh-m-title">速度</div>
                        <div className="vh-val">
                            <div className="vh-val-v">3.40</div>
                            <div className="vh-val-u">m/s</div>
                        </div>
                    </div>
                    <div className="vh-m">
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <div className="vh-m-title">高度</div>
                        <div className="vh-val">
                            <div className="vh-val-v">625.4</div>
                            <div className="vh-val-u">m</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

class Module extends React.Component {
    render() {
        return (
            <div className="lifter-sub-m">
                <ModuleTitle flag={this.props.flag} />
                <Data />
            </div>
        );
    }
}

class Lifter extends React.Component {
    render() {
        return (
            <div className={this.props.className}>
                <Module flag={true} />
                <Module flag={false} />
            </div>
        );
    }
}

export default Lifter;